<template>
    <div class="change-telephone">
        <header >
            <el-button icon="el-icon-arrow-left" type='text' primary='default' v-if='$store.state.isPc'>
                <router-link to='/user-center'>用戶中心</router-link>
            </el-button>
            <p>綁定郵箱</p>
        </header>
        <div class="main">
            <div class="item c-c imgs">
                <div>
                    <img :src="imgSrc" alt="">
                    <p>綁定郵箱</p>
                </div>
                <div class="line"></div>
                <div>
                    <img src="../../assets/imgs/new_unbind_mobile.png" alt="">
                    <p>驗證身份</p>
                </div>
            </div>
            <!-- <div class="item">
                <el-alert
                    title="修改手機號，24小時內限制提幣。一個手機號只能綁定一個帳號。更換手機號後，下次登入可使用新手機號登入。"
                    type="warning"
                    show-icon
                    :closable='false'>
                </el-alert>
            </div> -->
            <template v-if='!checkEmailPass'>
                <div class="item">
                    <el-input placeholder="郵箱地址"></el-input>
                </div>
                <div class="item">
                    <el-input placeholder="">
                        <el-button slot="append"  style='font-size:14px;width:140px;'>發送驗證碼</el-button>
                    </el-input>
                </div>
                <div class="item" v-if='!inCheckOld'>
                    <el-button type='primary' class='width100' @click='checkEmailPass = true'>下一步</el-button>
                </div>
            </template>
            <!-- 邮箱验证通过 -->
            <template v-else>
                <div class="item">
                    <p class="telephone">15960209969</p>
                    <el-input placeholder="验证码">
                        <el-button slot="append"  style='font-size:14px;width:140px;'>發送驗證碼</el-button>
                    </el-input>
                    <div class="item">
                        <el-button type='primary' class='width100' @click='checkOldPassed = true'>確定</el-button>
                    </div>
                </div>
            </template>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                checkEmailPass : false,
            };
        },
        computed : {
            imgSrc () {
                return !this.checkOldPassed ? require('@ast/imgs/unbind_mobile.png') : require('@ast/imgs/bind_mobile.png')
            }
        },
        methods : {

        }
    }
</script>
<style lang="less" scoped>
    @import url('../../assets/css/_b.less');
    @media screen and (max-width : 670px) {
        .change-telephone {
            width: 80%;
            background: #fff;
            margin: 30px auto;
            padding: 15px 5%;
            header {
                position: relative;
                padding: 30px;
                border-bottom: 1px solid @borderColor;
                text-align: center;
                .el-button {
                    position: absolute;
                    left: 30px;
                }
                p {
                    font-size: 28px;
                    font-weight: bold;
                    text-align: center;
                }
            }
            .main {
                padding-bottom: 30px;
                img {
                    width: 64px;
                    height: 64px;
                }
                .item {
                    // width: 390px;
                    margin: 30px auto;
                }
                .imgs {
                    .line {
                        width: 100px;
                        height: 1px;
                        border-top: 1px dashed @borderColor;
                        margin-bottom: 45px;
                    }
                    p {
                        padding: 15px 0;
                        color: @textColorOne;
                    }
                }
                .telephone {
                    font-size: 15px;
                    color: @textColorTwo;
                    margin-bottom: 15px;
                }
            }
        }
    }
    @media screen and (min-width : 670px) {
        .change-telephone {
            width: 1010px;
            box-shadow: 0 4px 8px 0 rgba(225, 234, 240, 0.8);
            background: #fff;
            margin: 60px auto;
            header {
                position: relative;
                padding: 30px;
                border-bottom: 1px solid @borderColor;
                text-align: center;
                .el-button {
                    position: absolute;
                    left: 30px;
                }
                p {
                    font-size: 28px;
                    font-weight: bold;
                    text-align: center;
                }
            }
            .main {
                padding-bottom: 30px;
                img {
                    width: 64px;
                    height: 64px;
                }
                .item {
                    width: 390px;
                    margin: 30px auto;
                }
                .imgs {
                    .line {
                        width: 200px;
                        height: 1px;
                        border-top: 1px dashed @borderColor;
                        margin-bottom: 45px;
                    }
                    p {
                        padding: 15px 0;
                        color: @textColorOne;
                    }
                }
                .telephone {
                    font-size: 15px;
                    color: @textColorTwo;
                    margin-bottom: 15px;
                }
            }
        }
    }
</style>